import React, { Component } from 'react';
import '../styles/Tater.scss'
import { Badge, TabBar } from 'antd-mobile'
import {
  UserCircleOutline,TextOutline,AppOutline
  } from 'antd-mobile-icons'
  import {Route,NavLink,withRouter} from 'react-router-dom'


class Tater extends Component {
    constructor(props){
        super(props)
            this.state={
               tabs : [
                    {
                      key: '/index/shouye',
                      title: '首页',
                      icon: <AppOutline/>,
                    },
                    {
                      key: '/index/kecheng',
                      title: '热门课程',
                      icon: <TextOutline/>,
                    },
                    {
                      key: '/index/wude',
                      title: '我的',
                      icon: <UserCircleOutline/>,
                    },
                  ]
            }
    }
    render() {
        return (
            <div className='tater'>
                <TabBar onChange={(key)=>{this.props.history.push(key)}}>
          {this.state.tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon}/>

          ))}
        </TabBar>
            </div>
        );
    }
}

export default withRouter(Tater);